<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://shiro.apache.org/tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>${webName}-后台管理系统</title>
<link rel="stylesheet" href="${res}/layui/css/layui.css">
<link rel="stylesheet"
	href="${res}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="${res}/story/css/admin.css">
</head>
<body>
	<div style="padding:10px;">
		<div class="layui-btn-group">
			<button class="layui-btn layui-btn-small layui-btn-danger del">
				<i class="layui-icon">&#xe640;</i>&nbsp;删除
			</button>
			<button class="layui-btn layui-btn-small layui-btn-normal">
				<i class="layui-icon">&#xe681;</i>&nbsp;导入
			</button>
			<button class="layui-btn layui-btn-small">
				<i class="layui-icon">&#xe601;</i>&nbsp;导出
			</button>
		</div>
		<table id="onlineUserIndex" lay-filter="onlineUserIndex" style="margin: 0;">
		</table>
	</div>
	<script src="${res}/layui/layui.js"></script>
	<script>
		
		layui.use([ 'element', 'table', 'layer' ], function() {
			var _this = this;
			var element = layui.element;
			var $ = layui.$;
			var layer = layui.layer;
			var table = layui.table;		
			//var tableWidth = $(document).find('.layui-tab-content').width();
			//var tableHeight = $(document).find('.layui-tab-content').height();
			//执行渲染
			//alert(iframeWidth);
			var online = table.render({				
				elem : '#onlineUserIndex', //指定原始表格元素选择器（推荐id选择器）				
				url : '${base}/manager/online/page/show',
				width:'1000px',
				height:'full-50',
				request : {
					pageName : 'pageNum' //页码的参数名称，默认：page
					,
					limitName : 'pageSize' //每页数据量的参数名，默认：limit
				},
				even : false,
				cols : [ [ {
					checkbox : true,
					LAY_CHECKED : false
				}, {
					field : 'jsessionId',
					title : '会话ID',
					width : 320,
					align : 'center'
				}, {
					field : 'loginName',
					title : '登陆用户名',
					width : 200,
					align : 'center'
				}, {
					field : 'loginIp',
					title : '登录IP',
					width : 100,
					align : 'center'
				}, {
					field : 'startLoginTime',
					title : '登录时间',
					width : 200,
					align : 'center'
				}, {
					field : 'lastAccessTime',
					title : '最近登录时间',
					width : 200,
					align : 'center'
				}
				] ] //设置表头
				,	
				page : true,
				limits : [ 20, 50, 100, 200 ],
				limit : 20,
			});

			table.on('tool(onlineUserIndex)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
				var tr = obj.tr;
				var id = data.id;
				if (layEvent === 'show') {
					var url = '${base}/user/' + id + '/show';
					parent.layer.open({
						type : 2,
						title : '查看用户详情',
						content : [ url, 'no' ],
						area : [ '500px', '600px' ]

					});
				} else if (layEvent === 'edit') {

				} else if (layEvent === 'del') {
					parent.layer.confirm('真的要删除该行数据吗？', function(index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);

					});
				} else if (layEvent === 'change') {

				} else {

				}
			});
		});
	</script>

	<script type="text/html" id="statusTpl">
  {{#  if(d.status === true){ }}
   <span class="story-status-yes">有效</span>
  {{#  } else { }}
    <span class="story-status-no">失效</span>
  {{#  } }}
</script>
</body>
</html>